<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Tckapco">
    
    <title>
        
            Web前端的困局与突破[转] |
        
        Tckapco
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"theboat.gitee.io","root":"/","language":"en"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":true},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Tckapco
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                LINKS
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">LINKS</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">Web前端的困局与突破[转]</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Tckapco</span>
                        
                            <span class="author-label">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-10-28 14:03:01</span>
        <span class="mobile">2021-10-28 14:03</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/other/">other</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>2k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>6 Mins</span>
        </span>
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="Web-前端的困局与突破"><a href="#Web-前端的困局与突破" class="headerlink" title="Web 前端的困局与突破"></a>Web 前端的困局与突破</h2><blockquote>
<p>每个Web前端都会不时思考自身对于团队的价值和在团队中的话语权</p>
</blockquote>
<h2 id="困局"><a href="#困局" class="headerlink" title="困局"></a>困局</h2><p>困局必然是负能量,耐下心来了解困局后再看突破.</p>
<h3 id="价值"><a href="#价值" class="headerlink" title="价值"></a>价值</h3><p>在团队中前端的职责是实现原型和设计工作中的客户端部分,是<strong>实现者</strong>.很少参与功能/程序设计.极少数业务场景下是重前端的.需要前端实现可视化编辑组件(可视化创建页面/Web编辑器).这样的团队少之又少.大部分情况下前端的职责就只是实现产品设计.</p>
<p>前端巧妙的程序设计,优秀的页面大部分情况下与商业逻辑是无关的.技术是依附于商业生存的.在客观的管理者视角看,前端是有价值的,但在技术团队中前端的价值不重要.只要把活干好了,别出错就可以了.也不需要维护管理公司命脉数据库.</p>
<blockquote>
<p>价值的意义:收入,市场竞争力都是基于价值的</p>
</blockquote>
<h3 id="话语权"><a href="#话语权" class="headerlink" title="话语权"></a>话语权</h3><p>从项目管理的角度看:</p>
<p><img src="https://gitee.com/theBoat/img-bed/raw/master/v2-9c05d452860cf8056a737ae1dac3e013_720w.jpg" alt="img"></p>
<img src="https://gitee.com/theBoat/img-bed/raw/master/image-20220220193632089.png" alt="image-20220220193632089" style="zoom:80%;" />

<p>产品同事对项目有绝对的话语权,设计同事是产品同事的下游,是基于产品同事的要求完成界面设计工作.</p>
<p>后端同事看似也是实现者,实则是<strong>后端是程序设计者</strong></p>
<p>当前端遇到上下游意见相左时,因为前端的分工是实现者,所以往往前端是没有话语权的.</p>
<p>有些人常说的用户体验,实际上这个活是UI设计干的活,前端只需要做到快速的基于设计完成客户端开发.并保证客户端的加载性能.</p>
<p>高流量多信息聚合的页面需要基于前端的专业意见去协作开发,不过这种情况太少了</p>
<blockquote>
<p>话语权的意义: 决定项目中与前端相关的问题能用你的专业想法解决,而不是由”外行”解决.</p>
</blockquote>
<h3 id="恶劣的的工作环境"><a href="#恶劣的的工作环境" class="headerlink" title="恶劣的的工作环境"></a>恶劣的的工作环境</h3><ol>
<li>没有产品原型</li>
<li>没有设计稿</li>
<li>没有后端接口文档</li>
<li>联调阶段扯皮</li>
</ol>
<p>以上问题在很多小团队出现的特别频繁,严重影响了工作进度.</p>
<p>前端是实现者,要基于设计去实现,基于实现去”消费”接口.</p>
<p>3 4 问题是出现的最频繁的,扯皮无止境,不停的内耗.</p>
<h3 id="天花板"><a href="#天花板" class="headerlink" title="天花板"></a>天花板</h3><p>随着三大剑客(<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=react+vue+ng&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >react vue ng<i class="fas fa-external-link-alt"></i></a>)的流行,基于成熟的组件库能极大的提高前端开发效率.大部分团队不需要再造适合公司业务场景的<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=%E7%BB%84%E4%BB%B6%E8%BD%AE%E5%AD%90&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >组件轮子<i class="fas fa-external-link-alt"></i></a>.从业两三年就可以达到日常90%的页面开发工作是”<strong>机械化</strong>“的.大量的时间反而是解决上节说到的恶劣的工作环境</p>
<p>前端工程管理,前端开发流程的制定,前端架构设计这些都是由前端话事人去设计和执行的.在技能水平+经验+对团队的了解程度+话语权上都应该由前端话事人去解决.大部分前端只需要遵循团队流程规范即可.</p>
<h3 id="JavaScript与Node"><a href="#JavaScript与Node" class="headerlink" title="JavaScript与Node"></a>JavaScript与Node</h3><blockquote>
<p>JavaScript 是困局这一点是很多人没有意识到,也不认同的.</p>
</blockquote>
<p>JavaScript 过于灵活宽松让代码不易于维护.<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=%E5%8A%A8%E6%80%81%E8%AF%AD%E8%A8%80&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >动态语言<i class="fas fa-external-link-alt"></i></a>在大型项目会降低可维护性. TypeScript 的类型系统需要对JavaScript 妥协.始终让前端在语言层面无法使用类型系统方便的写出分层明确和易于维护的代码.</p>
<p>这点不深入讨论,了解过其他强类型系统语言再来使用 TypeScript 写非常严谨容错率低的代码自然就能明白.</p>
<p>很多团队希望使用 Node 去提升自己的话语权,殊不知必须 Node 与公司所遇到的场景和问题契合才能解决问题.</p>
<p>大部分情况下不是要去使用Node完成项目View渲层染工作来更好的解决问题,而是在与抢现有后端同事饭碗.这自然会面临多方面的质疑和攻击.</p>
<p>不要把自己限死在 JavaScript ,前端掌握当前团队的后端语言不是啥坏事.不是每个项目都需要要SSR.都需要使用Node进行前后端分离.</p>
<h2 id="突破"><a href="#突破" class="headerlink" title="突破"></a>突破</h2><p>困局有:</p>
<ol>
<li>价值</li>
<li>话语权</li>
<li>恶劣的工作环境</li>
<li>天花板</li>
<li>JavaScript</li>
</ol>
<p>一句话就能说明白如何突破:</p>
<p><strong>不要把自己限制在客户端的实现者,让自己参与产品程序设计,精前端,懂业务,懂后端.</strong></p>
<h3 id="恶劣的工作环境"><a href="#恶劣的工作环境" class="headerlink" title="恶劣的工作环境"></a>恶劣的工作环境</h3><p>当<strong>没有产品原型和设计</strong>的情况下,正确更多的时间,去了解产品需求,使用<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=%E5%89%8D%E7%AB%AF%E7%95%8C%E9%9D%A2&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >前端界面<i class="fas fa-external-link-alt"></i></a>作为”原型”.完成部分产品没时间或者认为不重要的产品设计工作.没有设计的情况下基于成熟的UI组件,antd element 完成表单类的开发,一些<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >交互设计<i class="fas fa-external-link-alt"></i></a>自己做主设计交互细节并实现.没有设计的情况下大概率你能做主.</p>
<p>当后端<strong>给不到接口</strong>时,在前端角度维护接口文档,通过接口更深入的理解程序设计.有理有据的要求后端同时配合你给到接口让你使用,因为客户端是接口消费方.如果后端给不到接口就自行模拟接口,再联调的时候再修改也无妨,这样单前端定义接口的过程就是在进行程序设计.基于客观接口进行联调,避免主观争论.</p>
<p>善于<strong>使用错误追踪系统</strong>记录错误,例如 Sentry . 有理有据的去排查问题,定位问题,给出问题修复报告.防止莫名其妙背锅.</p>
<blockquote>
<p>愿你不遇到恶劣的工作环境,遇到相互配合的好同事</p>
</blockquote>
<h3 id="天花板与JavaScript"><a href="#天花板与JavaScript" class="headerlink" title="天花板与JavaScript"></a>天花板与JavaScript</h3><p>在前端角度不要局限于 Web 前端,在吃透当前工作环境时去了解其他客户端技术,比如各类小程序, IOS Android.</p>
<p>Swift Kotlin Java 都是不错的语言,了解他们后再回头写 TypeScript 会对编程有新的认识和理解.</p>
<p>不要局限于前端,在项目中了解目前团队的后端语言和后端知识.参与后端提供的接口中数据类型的定义,(类似 TypeScript 中的 interface).了解后端语言(PHP就算了),对项目后端的程序设计有足够了解.必要时尝试参与后端开发,先完成一些简单不重要的后端工作.</p>
<p>大部分情况下足够努力的前端做个三五年很容易在小团队做到天花板.不考虑换工作的情况下,去向<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=%E5%85%A8%E6%A0%88&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >全栈<i class="fas fa-external-link-alt"></i></a>发展是个很好的选择.只有掌握了程序设计才能掌握话语权.</p>
<p>现在很多人错误的理解了全栈,认为会 node 写个编译工具就是全栈,不要局限于掌握的后端语言是 Node . 使用 Node 能免去学习一门新语言的好处没有那么重要,反而会将你局限在 JavaScript.</p>
<p><strong>了解一门强类型语言,了解各种<a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/search?q=%E5%90%8E%E7%AB%AF%E6%8A%80%E6%9C%AF&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22:%22answer%22,%22sourceId%22:1213921984%7D" >后端技术<i class="fas fa-external-link-alt"></i></a>.了解其他前端领域.</strong></p>
<h3 id="价值与话语权"><a href="#价值与话语权" class="headerlink" title="价值与话语权"></a>价值与话语权</h3><p>吃透目前工作环境所需要使用的前端技术后,由<strong>实现者变为程序设计者</strong>不要将自己局限于”页面仔”.去理解了解业务才能提升自身价值.</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>始于前端,不局限于前端.不要把自己限制在客户端的实现者,让自己参与产品程序设计,精前端,懂业务,懂后端.</p>

        </div>

        

        

        
            <div class="article-nav">
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/07/25/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C-DNS/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">计算机网络-DNS</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Tckapco</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Web-%E5%89%8D%E7%AB%AF%E7%9A%84%E5%9B%B0%E5%B1%80%E4%B8%8E%E7%AA%81%E7%A0%B4"><span class="nav-number">1.</span> <span class="nav-text">Web 前端的困局与突破</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%B0%E5%B1%80"><span class="nav-number">2.</span> <span class="nav-text">困局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%B7%E5%80%BC"><span class="nav-number">2.1.</span> <span class="nav-text">价值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%9D%E8%AF%AD%E6%9D%83"><span class="nav-number">2.2.</span> <span class="nav-text">话语权</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%81%B6%E5%8A%A3%E7%9A%84%E7%9A%84%E5%B7%A5%E4%BD%9C%E7%8E%AF%E5%A2%83"><span class="nav-number">2.3.</span> <span class="nav-text">恶劣的的工作环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%A9%E8%8A%B1%E6%9D%BF"><span class="nav-number">2.4.</span> <span class="nav-text">天花板</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript%E4%B8%8ENode"><span class="nav-number">2.5.</span> <span class="nav-text">JavaScript与Node</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AA%81%E7%A0%B4"><span class="nav-number">3.</span> <span class="nav-text">突破</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%81%B6%E5%8A%A3%E7%9A%84%E5%B7%A5%E4%BD%9C%E7%8E%AF%E5%A2%83"><span class="nav-number">3.1.</span> <span class="nav-text">恶劣的工作环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%A9%E8%8A%B1%E6%9D%BF%E4%B8%8EJavaScript"><span class="nav-number">3.2.</span> <span class="nav-text">天花板与JavaScript</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%B7%E5%80%BC%E4%B8%8E%E8%AF%9D%E8%AF%AD%E6%9D%83"><span class="nav-number">3.3.</span> <span class="nav-text">价值与话语权</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">4.</span> <span class="nav-text">总结</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/dark-light-toggle.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/toc.js"></script>
    
</div>



</body>
</html>
